import './App.css';
import React from 'react';
import Header from '../../components/Header/App'
class CanvasComponent extends React.Component {
  componentDidMount() {
    this.updateCanvas();
  }
  updateCanvas() {
    const d = document.getElementById("canvas");
    const ctx = d.getContext('2d');
    //画矩形
    // ctx.fillStyle="rgba(0,153,255,0.7)";
    // ctx.fillRect(420,100, 160, 80);
    // ctx.fillRect(420,400,160,80);
    // ctx.fillRect(150,380,160,80);
    // ctx.fillRect(690,380,160,80);
    //画椭圆
    ctx.beginPath();
    ctx.ellipse(500, 150, 100, 50, 0, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(0,153,255,0.7)";
    ctx.fill();
    ctx.closePath();


    ctx.beginPath();
    ctx.ellipse(500, 440, 100, 50, 0, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(0,153,255,0.7)";
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.ellipse(230, 420, 100, 50, 0, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(0,153,255,0.7)";
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.ellipse(770, 420, 100, 50, 0, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(0,153,255,0.7)";
    ctx.fill();
    ctx.closePath();

    // ctx.stroke();

    //文字
    ctx.fillStyle = "#ffffff"
    ctx.font = "20pt 华文琥珀";
    ctx.fillText("软工新手指南", 422, 160);

    ctx.fillStyle = "#ffffff"
    ctx.font = "20pt 华文琥珀";
    ctx.fillText("前端", 470, 450);

    ctx.fillStyle = "#ffffff"
    ctx.font = "20pt 华文琥珀";
    ctx.fillText("后端", 200, 430);

    ctx.fillStyle = "#ffffff"
    ctx.font = "20pt 华文琥珀";
    ctx.fillText("数据库", 735, 430);


    //画直线
    ctx.beginPath();
    ctx.moveTo(500, 200);
    ctx.lineTo(500, 400);
    ctx.strokeStyle = "#f8f8f8";
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.closePath();
    //画斜线
    ctx.beginPath();
    ctx.moveTo(480, 200);
    ctx.lineTo(230, 380);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(520, 200);
    ctx.lineTo(770, 380);
    ctx.stroke();
    ctx.closePath();
    d.addEventListener("click", function (e) {
      // 鼠标x轴 >= 矩阵x轴 && 鼠标x轴 <= 矩阵x轴 + 矩阵宽度
      // 鼠标y轴 >= 矩阵y轴 && 鼠标y轴 <= 矩阵y轴 + 矩阵高度
      if (e.layerX >= 450 && e.layerX <= 550 && e.layerY >= 415 && e.layerY <= 465) {
        // window.open("http://www.baidu.com");
        window.open("/front");
      } else if (e.layerX >= 180 && e.layerX <= 280 && e.layerY >= 395 && e.layerY <= 445) {
        window.open("https://ai.taobao.com/?pid=mm_124190590_30248727_111528700405&union_lens=lensId%3APUB%401627102153%400b0b8b4d_0f7f_17ad6d88a39_05d3%4001");
      } else if (e.layerX >= 720 && e.layerX <= 820 && e.layerY >= 395 && e.layerY <= 445) {
        window.open("https://www.jd.com/?cu=true&utm_source=jxjg.softxv.cn&utm_medium=tuiguang&utm_campaign=t_1000159524_&utm_term=2bcefb5e7f6e4d4d8c24b4a0fb624bf4");
      }
    });


  }

  render() {
    return (
      <canvas id="canvas" width={1000} height={1000} />
    );
  }
}
function Home() {
  return (
    <div className='tops'>
      <div className='top'>
        <Header />
      </div>
      <div className='content'>
        <CanvasComponent />
      </div>
    </div>
  );
}
export default Home;

